<template>
  <div class="crop-page">
    <el-row :gutter="13">
      <el-col :span="8">
        <div class="custom-table-header f-c j-b">
          <div class="f-r j-b" style="padding:0 20px;margin-bottom: 10px">
            <div class="title f-r a-c">
              农作物类型
            </div>
            <el-button type="primary" size="mini" @click="onAdd1">新增</el-button>
          </div>
          <div class="tr f-r a-c">
            <div class="td">序号</div>
            <div class="td">名称</div>
            <div class="td">排序</div>
            <div class="td">操作</div>
          </div>
        </div>
        <div
          v-loading="loading1"
          class="custom-table-body"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <div v-for="(item,index) in tableData1" :key="index" class="tr f-r a-c">
            <div class="td">
              <el-radio v-model="typeId" :label="item.typeId" @change="changeType(item)" />
              {{ index + 1 }}
            </div>
            <div class="td">{{ item.typeName }}</div>
            <div class="td">{{ item.sort }}</div>
            <div class="td">
              <el-button type="text" @click="onEdit1(item)">修改</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="custom-table-header f-c j-b">
          <div class="f-r j-b" style="padding:0 20px;margin-bottom: 10px">
            <div class="title f-r a-c">
              农作物信息
              <span class="type-item">{{ typeName }}</span>
            </div>
            <el-button type="primary" size="mini" :disabled="!typeId" @click="onAdd2">新增</el-button>
          </div>
          <div class="tr f-r a-c" style="margin-right: 18px">
            <div class="td">序号</div>
            <div class="td">名称</div>
            <div class="td">排序</div>
            <div class="td">操作</div>
          </div>
        </div>
        <div
          v-loading="loading2"
          class="custom-table-body"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <div v-for="(item,index) in tableData2" :key="index" class="tr f-r a-c">
            <div class="td">
              <el-radio v-model="infoId" :label="item.id" @change="changeInfo(item)" />
              {{ index + 1 }}
            </div>
            <div class="td">{{ item.name }}</div>
            <div class="td">{{ item.sort }}</div>
            <div class="td">
              <el-button type="text" @click="onEdit2(item)">修改</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="custom-table-header f-c j-b">
          <div class="f-r j-b" style="padding:0 20px;margin-bottom: 10px">
            <div class="title f-r a-c">
              农作物品种
              <span class="type-item">{{ infoName }}</span>
            </div>
            <el-button type="primary" size="mini" :disabled="!infoId" @click="onAdd3">新增</el-button>
          </div>
          <div class="tr f-r a-c">
            <div class="td">名称</div>
            <div class="td">排序</div>
            <div class="td">操作</div>
          </div>
        </div>
        <div
          v-loading="loading3"
          class="custom-table-body"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <div v-for="(item,index) in tableData3" :key="index" class="tr f-r a-c">
            <div class="td">{{ item.name }}</div>
            <div class="td">{{ item.sort }}</div>
            <div class="td">
              <el-button type="text" @click="onEdit3(item)">修改</el-button>
              <el-button type="text" @click="onDelete3(item)">删除</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="新增/编辑农作物"
      :visible.sync="dialogVisible1"
      append-to-body
      width="463px"
    >
      <el-form ref="formRef1" label-position="top" :model="ruleForm1" :rules="rules1">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm1.name" clearable />
        </el-form-item>
        <el-form-item label="顺序" prop="sort">
          <el-input v-model="ruleForm1.sort" clearable type="number" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="onSave1">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增/编辑农作物信息"
      :visible.sync="dialogVisible2"
      append-to-body
      width="463px"
    >
      <el-form ref="formRef2" label-position="top" :model="ruleForm2" :rules="rules2">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm2.name" clearable />
        </el-form-item>
        <el-form-item label="顺序" prop="sort">
          <el-input v-model="ruleForm2.sort" clearable type="number" />
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <div style="width: 100%">
            <DragUpload style="width: 100%" :url="ruleForm2.img" @on-success="url => ruleForm2.img = url" />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="onSave2">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增/编辑农作物品种"
      :visible.sync="dialogVisible3"
      append-to-body
      width="463px"
    >
      <el-form ref="formRef3" label-position="top" :model="ruleForm3" :rules="rules3">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm3.name" clearable />
        </el-form-item>
        <el-form-item label="顺序" prop="sort">
          <el-input v-model="ruleForm3.sort" clearable type="number" />
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <div style="width: 100%">
            <DragUpload style="width: 100%" :url="ruleForm3.img" @on-success="url => ruleForm3.img = url" />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="onSave3">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import crud from '@/mixins/crud';
import { http_crop, http_crop_info } from '@/api';

export default {
  name: 'Index',
  mixins: [crud],
  data() {
    return {
      loading1: false,
      typeId: '',
      typeName: '',
      tableData1: [
      ],
      dialogVisible1: false,
      ruleForm1: {
        id: undefined,
        type: 1,
        name: '',
        sort: ''
      },
      rules1: {
        name: [{ required: true, message: '不能为空' }]
      },

      loading2: false,
      infoId: '',
      infoName: '',
      tableData2: [
      ],
      dialogVisible2: false,
      ruleForm2: {
        id: undefined,
        type: '2',
        typeId: '',
        name: '',
        sort: '',
        img: ''
      },
      rules2: {
        name: [{ required: true, message: '不能为空' }]
      },

      loading3: false,
      tableData3: [
      ],
      dialogVisible3: false,
      ruleForm3: {
        id: undefined,
        type: '2',
        typeId: '',
        cropId: '',
        name: '',
        sort: '',
        img: ''
      },
      rules3: {
        name: [{ required: true, message: '不能为空' }]
      }
    }
  },
  created() {
    this.getData1()
  },
  methods: {
    /**
     * 农作物
     */
    getData1() {
      this.loading1 = true
      http_crop.page().then(res => {
        this.tableData1 = res.data
        this.loading1 = false
        if (this.tableData1.length) {
          this.changeType(this.tableData1[0])
        }
      }).catch(() => {
        this.loading1 = false
      })
    },
    changeType(item) {
      this.typeId = item.typeId
      this.typeName = item.typeName
      this.getData2()
    },
    onAdd1() {
      this.ruleForm1 = {
        id: undefined,
        type: 1,
        name: '',
        sort: ''
      }
      this.dialogVisible1 = true
    },
    onEdit1(row) {
      this.ruleForm1 = {
        id: row.typeId,
        name: row.typeName,
        sort: row.sort
      }
      this.dialogVisible1 = true
    },
    onSave1() {
      this.$refs.formRef1.validate(valid => {
        if (valid) {
          http_crop[this.ruleForm1.id ? 'update' : 'create']({
            ...this.ruleForm1
          }).then(res => {
            this.dialogVisible1 = false
            this.$message.success(res.msg)
            this.getData1()
          })
        }
      })
    },
    /**
     * 农作物信息
     */
    getData2() {
      this.loading2 = true
      http_crop_info.page({
        type: '2',
        parentId: this.typeId
      }).then(res => {
        this.tableData2 = res.data
        this.loading2 = false
        if (this.tableData2.length) {
          this.changeInfo(this.tableData2[0])
          this.getData3()
        }
      }).catch(() => {
        this.loading2 = false
      })
    },
    changeInfo(item) {
      this.infoId = item.id
      this.infoName = item.name
      this.getData3()
    },
    onAdd2() {
      this.ruleForm2 = {
        id: undefined,
        type: '2',
        typeId: this.typeId,
        img: '',
        name: '',
        sort: ''
      }
      this.dialogVisible2 = true
    },
    onEdit2(row) {
      this.ruleForm2 = {
        id: row.id,
        name: row.name,
        sort: row.sort
      }
      this.dialogVisible2 = true
    },
    onSave2() {
      this.$refs.formRef2.validate(valid => {
        if (valid) {
          if (this.ruleForm2.id) {
            http_crop.update2({
              id: this.ruleForm2.id,
              typeId: this.ruleForm2.typeId,
              parentId: this.ruleForm2.typeId,
              cropType: this.ruleForm2.cropType,
              cropName: this.ruleForm2.cropName,
              img: this.ruleForm2.img,
              sort: this.ruleForm2.sort
            }).then(res => {
              this.dialogVisible2 = false
              this.$message.success(res.msg)
              this.getData2()
            })
          } else {
            http_crop.create({
              ...this.ruleForm2
            }).then(res => {
              this.dialogVisible2 = false
              this.$message.success(res.msg)
              this.getData2()
            })
          }
        }
      })
    },
    /**
     *
     */
    getData3() {
      this.loading3 = true
      http_crop_info.page({
        type: '3',
        parentId: this.infoId
      }).then(res => {
        this.tableData3 = res.data
        this.loading3 = false
      }).catch(() => {
        this.loading3 = false
      })
    },
    onAdd3() {
      this.ruleForm3 = {
        id: undefined,
        type: '3',
        typeId: this.typeId,
        cropId: this.infoId,
        img: '',
        name: '',
        sort: ''
      }
      this.dialogVisible3 = true
    },
    onEdit3(row) {
      this.ruleForm3 = {
        id: row.id,
        name: row.name,
        sort: row.sort
      }
      this.dialogVisible3 = true
    },
    onDelete3(row) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          http_crop.delete(row.id).then(res => {
            this.$message.success(res.msg)
            this.getData3()
          })
        })
        .catch(() => {

        })
    },
    onSave3() {
      this.$refs.formRef3.validate(valid => {
        if (valid) {
          if (this.ruleForm3.id) {
            http_crop.update2({
              id: this.ruleForm3.id,
              typeId: this.ruleForm3.typeId,
              parentId: this.ruleForm3.typeId,
              cropType: this.ruleForm3.cropType,
              cropName: this.ruleForm3.cropName,
              img: this.ruleForm3.img,
              sort: this.ruleForm3.sort
            }).then(res => {
              this.dialogVisible3 = false
              this.$message.success(res.msg)
              this.getData2()
            })
          } else {
            http_crop.create({
              ...this.ruleForm3
            }).then(res => {
              this.dialogVisible3 = false
              this.$message.success(res.msg)
              this.getData3()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.crop-page {
  height: 100%;
  .el-radio__label {
    display: none;
  }
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .custom-table-body {
      flex-grow: 1;
      overflow: auto;
    }
  }
}
.custom-table-body {
  .tr {
    border-bottom: 1px solid #E6E6E6;
    .td {
      width: 20%;
      height:80px;
      line-height: 80px;
      font-size: 14px;

      font-weight: 400;
      color: #333333;
    }
    .td:nth-child(2) {
      width: 40%
    }
    .td:nth-child(3) {
      flex-grow: 1;
    }

    .td:nth-child(1) {
      padding-left: 13px;
    }
    .td:nth-child(4) {
      display: flex;
      align-items:center;
      justify-content: center;
      width: 151px;
    }
  }
}
.custom-table-header {
  width: 100%;
  height: 86px;
  flex-shrink: 0;
  background: #F3F6F9;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #E6E6E6;
  padding: 11px 0;

  .tr {
    .td {
      width: 20%;
      font-size: 14px;

      font-weight: 400;
      color: #999999;
    }
    .td:nth-child(2) {
      width: 40%
    }
    .td:nth-child(3) {
      flex-grow: 1;
    }
    .td:nth-child(1) {
      padding-left: 13px;
    }
    .td:nth-child(4) {
      display: flex;
      align-items:center;
      justify-content: center;
      width: 151px;
    }
  }
  .title {
    font-size: 14px;

    font-weight: 400;
    color: #333333;
    line-height: 14px;
  }
  .type-item {
    display: inline-block;

    font-weight: 400;
    color: #1AAD23;
    line-height: 14px;
    margin-right: 4px;
    margin-left: 10px;
  }
}
</style>
